<template>
  <div class="row">
    <h1 v-if="isFirst">欢迎进入此网站</h1>
    <h1 v-else-if="isLoading">资源正在请求 请勿着急</h1>
    <h1 v-else-if="isError">{{isError}}</h1>
    <div v-else class="card" v-for="card in cards" :key="card.id">
      <a :href="card.url" target="_blank">
        <img :src="card.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{card.login}}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Main',
  mounted(){
  
  },
  computed:{
    ...mapState(['isFirst','isLoading','isError','cards']),
  }
}
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>
